<template>
  <div class="find">
    <!-- 公共 indexBar 组件 -->
    <index-bar :indexBarData="indexBarData" :skipName="skipName"></index-bar>
    <!-- 子路由出口 嵌套路由一定要配置！！！ -->
    <div class="app-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import indexBar from "../../components/indexBar/indexBar.vue";
import indexRecommendVue from "./children/index-recommend/indexRecommend.vue";

// 页面为"发现音乐时" 传给组件 indexBar 的数据
const indexBarData = reactive([
  "个性推荐",
  "专属定制",
  "歌单",
  "排行榜",
  "歌手",
  "最新音乐",
]);
// 跳转页面 name
const skipName = reactive([
  "recommend", // 推荐
  "customization", // 定制
  "songList", // 歌单
  "rankingList", // 排行榜
  "singer", // 歌手
  "newMusic", // 最新音乐
]);

</script>
<style lang="less">
@import url(../../assets/pagesStyle.css);

.app-container {
  padding: 20px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 90px;
}
</style>